<template>
  <div class="product-container">
    <div class="search-box">
      <div class="search-top">
        <div class="icon">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="btn">
          <el-button @click="toResetForm">重置</el-button>
          <el-button type="primary" @click="searchResult">查询结果</el-button>
        </div>
      </div>
      <!-- 搜索框  表单 -->
      <div class="search-bottom">
        <el-form ref="SearchFormRef" :model="SearchForm" label-width="auto" label-position='left' class="demo-ruleForm"
          size='large'>
          <el-form-item label="输入搜索:">
            <el-input v-model="SearchForm.keyword" placeholder="商品名称" />
          </el-form-item>
          <el-form-item label="商品货号:">
            <el-input v-model="SearchForm.productSn" placeholder="商品货号" />
          </el-form-item>
          <el-form-item label="商品分类:">
            <!-- 设置 clearable 属性   选择输入框会出现x号  点击可清空已选择的内容 -->
            <el-cascader clearable :emitPath="false" v-model="SearchForm.productCategoryId" :options="categoryOptions"
              @change="handleCategoryChange" />
          </el-form-item>
          <el-form-item label="商品品牌:">
            <el-select clearable v-model="SearchForm.brandId" placeholder="请选择品牌">
              <el-option v-for="item in productBrandList" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态:">
            <el-select clearable v-model="SearchForm.publishStatus" placeholder="全部">
              <el-option label="上架" :value="1" />
              <el-option label="下架" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态:">
            <el-select clearable v-model="SearchForm.verifyStatus" placeholder="全部">
              <el-option label="审核通过" :value="1" />
              <el-option label="未审核" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 数据列表   添加按钮 -->
    <div class="add-box">
      <div class="icon">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button type="primary" @click="toAddProduct">添加</el-button>
      </div>
    </div>
    <!-- 商品列表 表格 -->
    <div class="table-box">
      <el-table ref="multipleTableRef" border :data="productListData" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="id" label="编号" width="80" />
        <el-table-column align="center" label="商品图片">
          <template #default="{ row }">
            <img :src="row.pic" alt="" style="width:80px">
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称">
          <template #default="{ row }">
            <p>{{ row.name }}</p>
            <p>品牌: <span>{{ row.brandName }}</span></p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格/货号">
          <template #default="{ row }">
            <p>价格: <span>¥{{ row.price }}</span></p>
            <p>货号: <span>{{ row.productSn }}</span></p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签">
          <template #default="{ row }">
            <p>上架: <span><el-switch v-model="row.publishStatus" :active-value="1" :inactive-value="0"
                  @click="updatePublishStatus(row.publishStatus, [row.id])" /></span></p>
            <p>新品: <span><el-switch v-model="row.newStatus" :active-value="1" :inactive-value="0"
                  @click="updateNewStatus(row.newStatus, [row.id])" /></span></p>
            <p>推荐: <span><el-switch v-model="row.recommandStatus" :active-value="1" :inactive-value="0"
                  @click="updateRecommendStatus(row.recommandStatus, [row.id])" /></span></p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="排序" />
        <el-table-column align="center" label="SKU库存">
          <template #default="{ row }">
            <el-button type="primary" :icon="EditPen" circle @click="openEditProduct(row.productSn)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sale" label="销量" />
        <el-table-column align="center" label="审核状态">
          <template #default="{ row }">
            <p style="margin-bottom: 10px;">{{ row.verifyStatus === 0 ? '未审核' : '已审核' }}</p>
            <el-button link type="primary" size='default'>审核详情</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button>编辑</el-button>
            <el-button type='danger' @click="updateDeleteStatus(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 批量操作 ---- 分页器 -->
    <div class="table-bottom">
      <!-- 左边 批量操作 -->
      <div class="left">
        <el-select v-model="operationNum" placeholder="批量操作">
          <el-option label="商品上架" value="0" />
          <el-option label="商品下架" value="1" />
          <el-option label="设为推荐" value="2" />
          <el-option label="取消推荐" value="3" />
          <el-option label="设为新品" value="4" />
          <el-option label="取消新品" value="5" />
          <el-option label="转移到分类" value="6" />
          <el-option label="移入回收站" value="7" />
        </el-select>
        <el-button type='primary' @click="toSureOperation">确定</el-button>
      </div>
      <!-- 右边 分页器 -->
      <div class="right">
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
          :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 编辑货品信息  弹窗组件 -->
    <EditProduct :dialogProductVisible="dialogProductVisible" :productSn="currentProductSn" @cancel="doCancelFn"
      @confirm="doConfirmFn"></EditProduct>
  </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import EditProduct from './EditProduct.vue';
import { EditPen } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';

// 商品 一级分类对象  类型约束
interface productCategoryList {
  value: number;
  label: string;
  children: productCategoryChildren[];
}

// 商品 二级对象(子分类)  类型约束
interface productCategoryChildren {
  value: number;
  label: string;
}

interface SearchFormModel {
  keyword: string;  // 搜索关键字(商品名称)
  productSn: string;  // 商品货号
  productCategoryId: string;  // 商品分类编号
  brandId: string;  // 商品品牌
  publishStatus: string;  // 上架状态
  verifyStatus: string;  // 审核状态
  [key: string]: string;
}

// 分页器相关参数
const paginationParams = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
})

// 搜索框 绑定的  表单数据
const SearchForm = reactive<SearchFormModel>({
  keyword: '',   // 搜索关键字(商品名称)
  productSn: '',  // 商品货号
  productCategoryId: '',  // 商品分类编号
  brandId: '',  // 商品品牌
  publishStatus: '',  // 上架状态
  verifyStatus: '',  // 审核状态
});


// 批量操作 选择器  的 绑定值
const operationNum = ref('');

// 当前勾选的商品对象所组成的 数组
const multipleSelection = ref<number[]>([]);

// 点击表格第一列的 全选 或者  多选框   触发该方法 拿到当前勾选的商品对象所组成的 数组 val
const handleSelectionChange = (val: IProductModel[]) => {
  // 处理勾选的内容  我们只需要拿到 当前勾选的商品的id 组成的数组
  const checkedIds: number[] = val.map(item => {
    return item.id
  });
  multipleSelection.value = checkedIds;
  // console.log('勾选的商品id数组1 :', checkedIds);
  // console.log('勾选的商品id数组2 :', multipleSelection.value);
}

// 当前选中的商品分类数组
// const CategoryVal = ref([]);
// 商品分类列表  数据
const categoryOptions = ref<productCategoryList[]>([]);

// 商品品牌列表  数据
const productBrandList = ref<IBrandList[]>([]);

// 商品列表  表格数据
const productListData = ref<IProductModel[]>([]);



// 抽离  查询  商品列表数据  的方法
const queryProductList = (queryParams: IProductListParams) => {
  // 发送请求  获取表格数据
  http.product.getProductList({
    pageNum: paginationParams.currentPage,
    pageSize: paginationParams.pageSize,
    ...queryParams
  }).then(res => {
    console.log('商品列表数据 :', res);
    if (res.code === 200) {
      productListData.value = res.data.list;  // 更新商品表格数据
      paginationParams.total = res.data.total;   // 更新分页器总数
    }
  });
};

// 发送请求  获取 商品表格数据
// 没有传其他参数的话,默认请求就只传 pageNum 和 pageSize 两个参数
queryProductList({});


// 发送请求  获取商品分类列表
http.productCategory.getProductCategoryList().then(res => {
  // 请求成功 处理响应回来的数据
  if (res.code === 200) {
    console.log('商品分类列表 :', res);
    const CategoryData = res.data;
    CategoryData.forEach(item => {
      // 定义一个一级分类对象
      const option: productCategoryList = {
        value: item.id,
        label: item.name,
        // 子(二级)分类数组
        children: [] as productCategoryChildren[]
      };

      item.children.forEach(el => {
        // 定义一个  二级(子)分类对象
        const childrens: productCategoryChildren = {
          value: el.id,
          label: el.name
        };
        // 将子(二级)分类对象  加入到  父(一级)分类对象中
        option.children.push(childrens);
      });
      // 每次遍历都将  一级分类对象option加入到  整个分类数组中
      categoryOptions.value.push(option);
    })
  }
});

// 发送请求 获取商品品牌列表
http.brand.getBrandList({
  pageNum: 1,
  pageSize: 100,
}).then(res => {
  if (res.code === 200) {
    console.log('商品品牌列表 :', res);
    productBrandList.value = res.data.list;
  }
});

// 修改当前商品分类时  触发该方法
const handleCategoryChange = (value: any) => {
  // 这里的value 是 当前选中的分类id组成的数组  数组第一项对应一级分类的id  第二项对应二级分类的id
  console.log('当前选中的商品分类 :', value);
}

// 点击 重置 
const toResetForm = () => {
  SearchForm.keyword = '';   // 搜索关键字(商品名称)
  SearchForm.productSn = '';  // 商品货号
  SearchForm.productCategoryId = '';  // 商品分类编号
  SearchForm.brandId = '';  // 商品品牌
  SearchForm.publishStatus = '';  // 上架状态
  SearchForm.verifyStatus = '';  // 审核状态
}

// 点击 查询结果
const searchResult = () => {
  // 判断一下,如果参数为空字符串,就不要带过去发送请求了
  const params = {} as SearchFormModel;
  for (let key in SearchForm) {
    if (SearchForm[key] !== '') {
      params[key] = SearchForm[key];
    }
  }
  // 调用  查询商品列表的方法  携带所有不为空字符串的  搜索框参数 去请求
  queryProductList(params);
}

// 点击 添加商品  跳转到 添加商品页面
const toAddProduct = () => {
  router.push('/pms/addProduct');
}

// 单个商品  "上下架"
const updatePublishStatus = (publishStatus: number, ids: number[]) => {
  http.product.updatePublishStatus({
    publishStatus,
    ids
  }).then(res => {
    if (res.code === 200) {
      // 请求成功后 

      // 再次请求表格数据  更新数据
      queryProductList({});
      // 提示用户 操作成功
      ElMessage.success(publishStatus === 1 ? '商品上架成功' : '商品下架成功');
    }
  })
};

// 单个商品  设为"新品"  /  取消"新品"
const updateNewStatus = (newStatus: number, ids: number[]) => {
  http.product.updateNewStatus({
    newStatus,
    ids
  }).then(res => {
    if (res.code === 200) {
      // 请求成功后 

      // 再次请求表格数据  更新数据
      queryProductList({});
      // 提示用户 操作成功
      ElMessage.success(newStatus === 1 ? '设为新品成功' : '取消新品成功');
    }
  })
};

// 单个商品  设为"推荐"  /  取消"推荐"
const updateRecommendStatus = (recommendStatus: number, ids: number[]) => {
  http.product.updateRecommendStatus({
    recommendStatus,
    ids
  }).then(res => {
    if (res.code === 200) {
      // 请求成功后 

      // 再次请求表格数据  更新数据
      queryProductList({});
      // 提示用户 操作成功
      ElMessage.success(recommendStatus === 1 ? '设为推荐成功' : '取消推荐成功');
    }
  })
};

// 单个商品   删除  操作
const updateDeleteStatus = (ids: number[]) => {
  // 删除 操作 还是要严谨一点  让用户进行二次确认
  ElMessageBox.confirm(
    `是否要进行删除操作 ?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 
    http.product.updateDeleteStatus({
      ids,
      deleteStatus: 1
    }).then(res => {
      if (res.code === 200) {
        // 再次请求  商品表格数据  更新数据
        queryProductList({});
        // 提示用户 删除商品成功
        ElMessage.success('删除成功');
      }
    });
  }).catch(() => {
    ElMessage.warning('取消删除');
  })
}



// 抽离 批量 修改 商品"上下架状态" 请求方法
const setPublishStatus = (publishStatus: number, ids: number[]) => {
  // 1表示上架  0表示下架
  // 调用时,需要传 两个参数 : 上下架状态,商品id组成的数组
  // setPublishStatus(0, [1]);
  ElMessageBox.confirm(
    `是否要对勾选的商品进行批量 ${publishStatus === 1 ? '【上架】' : '【下架】'} 操作?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 
    http.product.updatePublishStatus({
      publishStatus,
      ids
    }).then(res => {
      if (res.code === 200) {
        // 请求成功后 

        // 再次请求表格数据  更新数据
        queryProductList({});
        // 提示用户 操作成功
        ElMessage.success(publishStatus === 1 ? '商品上架成功' : '商品下架成功');
      }
    })
  }).catch(() => {
    ElMessage.warning('取消批量操作');
  })
};

// 抽离 批量  设置/取消"新品"  请求方法
const setNewStatus = (newStatus: number, ids: number[]) => {
  // 1表示设置为新品  0表示取消设置新品
  // 调用时,需要传 两个参数 : 商品新品状态,商品id组成的数组
  // setNewStatus(1, [1]);
  ElMessageBox.confirm(
    `是否要对勾选的商品进行批量 ${newStatus === 1 ? '【设为新品】' : '【取消新品】'} 操作?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 
    http.product.updateNewStatus({
      newStatus,
      ids
    }).then(res => {
      if (res.code === 200) {
        // 请求成功后 

        // 再次请求表格数据  更新数据
        queryProductList({});
        // 提示用户 操作成功
        ElMessage.success(newStatus === 1 ? '设为新品成功' : '取消新品成功');
      }
    })
  }).catch(() => {
    ElMessage.warning('取消批量操作');
  })
}

// 抽离 批量  设置/取消商品"推荐"  请求方法
const setRecommendStatus = (recommendStatus: number, ids: number[]) => {
  // 1表示设置为新品  0表示取消设置新品
  // 调用时,需要传 两个参数 : 商品新品状态,商品id组成的数组
  // setNewStatus(1, [1]);
  ElMessageBox.confirm(
    `是否要对勾选的商品进行批量 ${recommendStatus === 1 ? '【设为推荐】' : '【取消推荐】'} 操作?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 
    http.product.updateRecommendStatus({
      recommendStatus,
      ids
    }).then(res => {
      if (res.code === 200) {
        // 请求成功后 

        // 再次请求表格数据  更新数据
        queryProductList({});
        // 提示用户 操作成功
        ElMessage.success(recommendStatus === 1 ? '设为推荐成功' : '取消推荐成功');
      }
    })
  }).catch(() => {
    ElMessage.warning('取消批量操作');
  })
}

// 抽离 批量(移入回收站) 删除商品  请求方法
const setDeleteStatus = (ids: number[]) => {
  ElMessageBox.confirm(
    `是否要对勾选的商品进行批量 【移入回收站】 操作?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 发送请求 删除商品
    http.product.updateDeleteStatus({
      ids,
      deleteStatus: 1
    }).then(res => {
      if (res.code === 200) {
        // 再次请求  商品表格数据  更新数据
        queryProductList({});
        // 提示用户 删除商品成功
        ElMessage.success('移入回收站成功');
      }
    });
  }).catch(() => {
    ElMessage.warning('取消批量操作');
  })
}

// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
  paginationParams.pageSize = val;
  // 重新请求    更新数据
  queryProductList({});
}
// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
  paginationParams.currentPage = val;
  // 重新请求  更新数据
  queryProductList({});
}

// 点击 "确定按钮"  进行  "批量操作"
const toSureOperation = () => {
  // 拿到当前勾选的商品的id数组  判断一下 如果为空(长度为0) 提示用户先勾选
  // 不为空(长度不为0),才会走下面的分支
  if (multipleSelection.value.length == 0) {
    ElMessage.warning('请先选择要批量操作的商品');
  } else {
    // console.log('勾选的内容', multipleSelection.value);
    // 使用Switch语句 判断 当前是哪一种批量操作
    switch (operationNum.value) {
      case '0':
        // 0 ===> 批量操作 商品上架
        setPublishStatus(1, multipleSelection.value);
        break;
      case '1':
        // 1 ===> 批量操作 商品下架
        setPublishStatus(0, multipleSelection.value);
        break;
      case '2':
        // 2 ===> 批量操作 设为推荐
        setRecommendStatus(1, multipleSelection.value);
        break;
      case '3':
        // 3 ===> 批量操作 取消推荐
        setRecommendStatus(0, multipleSelection.value);
        break;
      case '4':
        // 4 ===> 批量操作 设为新品
        setNewStatus(1, multipleSelection.value);
        break;
      case '5':
        // 5 ===> 批量操作 取消新品
        setNewStatus(0, multipleSelection.value);
        break;
      case '6':
        // 6 ===> 批量操作 转移到分类
        ElMessage.error(`转移到分类 : ${multipleSelection.value}`);
        break;
      case '7':
        // 7 ===> 批量操作 移入回收站
        setDeleteStatus(multipleSelection.value);
        break;
      default:
        // 如果以上情况都不符合,就是用户还未选择批量操作类型,提醒用户选择
        ElMessage.warning('请选择批量操作类型');
        break;
    }
  }

}

// 编辑货品信息  弹窗组件 相关数据
const dialogProductVisible = ref(false);

// 需要传递给 子组件 的 当前商品货号
const currentProductSn = ref<number | string>('');

// 点击 SKU库存  按钮
const openEditProduct = (productSn: number) => {
  // 传递一个商品货号
  currentProductSn.value = productSn;
  // 打开弹窗
  dialogProductVisible.value = true;
}

// 监听 子组件EditProduct 的 自定义事件cancel 
const doCancelFn = () => {
  dialogProductVisible.value = false;  // 关闭窗口
}

// 监听 子组件EditProduct 的 自定义事件confirm
const doConfirmFn = () => {
  dialogProductVisible.value = false;  // 关闭窗口
  // 编辑成功后,再次发送请求  更新数据
  // queryList();
}


</script>

<style scoped lang="less">
.product-container {

  // 搜索框
  .search-box {
    // border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    padding: 20px;

    .search-top {
      display: flex;
      justify-content: space-between;

      .icon {
        display: flex;
        align-items: center;

        span {
          margin-left: 5px;
        }
      }

      .btn {
        .el-button {
          margin-left: 20px;
        }
      }
    }

    .search-bottom {
      margin-top: 15px;

      .el-form {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .el-form-item {
          margin-right: 30px;
        }
      }

      // 六个搜索框
      .el-input {
        width: 226px;
      }
    }
  }

  // 添加 按钮
  .add-box {
    padding: 20px;
    margin: 20px 0;
    // border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }
  }

  // 清除操作  删除按钮的左外边距,使两个按钮上下对齐
  .el-button+.el-button {
    margin-left: 0;
  }

  // 批量操作   分页器
  .table-bottom {
    display: flex;
    justify-content: space-between;

    // 左边 批量操作
    .left {
      display: flex;
      align-items: center;

      .el-button {
        margin-left: 20px;
      }
    }

    // 右边 分页器
    .right {
      display: flex;
      flex-direction: row-reverse;
      margin: 20px 0;
    }
  }
}
</style>